<template>
	<view class="wrap">
		<view class="menu">
			<view class="item" :class="{'active': type == 0}" @click="getList(0)">
				支出明细
			</view>
			<view class="item" :class="{'active': type == 1}" @click="getList(1)">
				充值明细
			</view>
		</view>
		<view class="list">
			<view class="item" v-for="item in list" :key="item.id">
				<view class="left">
					<view class="des">{{item.memo}}</view>
					<view class="time">{{ formatDate(item.createtime * 1000)}}</view>
				</view>
				<view class="right">
					{{type == 0 ? '-' : '+'}}{{item.amount}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import API from "./request.js"
	export default {
		data() {
			return {
				type: 0, // 0支出 1充值
				page: 1,
				size: 20,
				list: [],
				info: uni.getStorageSync('DB_userinfo'),
				isNull: false,
				
			}
		},
		onLoad(){
			this.getList()
		},
		onReachBottom() {
			if (this.isNull) return
			this.page++
			this.getList()
		},
		filters: {
			formatDate (date, middle = '-') {
				date = new Date(date)
				const year = date.getFullYear()
				const month = date.getMonth() + 1
				const day = date.getDate()

				const hour = date.getHours()
				const minute = date.getMinutes()
				const second = date.getSeconds()

				const t1 = [year, month, day].map(this.formatNumber).join(middle)
				const t2 = [hour, minute, second].map(this.formatNumber).join(':')

				return `${t1} ${t2}`
			}
		},
		methods: {
			formatDate (date, middle = '-') {
				date = new Date(date)
				const year = date.getFullYear()
				const month = date.getMonth() + 1
				const day = date.getDate()
			
				const hour = date.getHours()
				const minute = date.getMinutes()
				const second = date.getSeconds()
			
				const t1 = [year, month, day].map(this.formatNumber).join(middle)
				const t2 = [hour, minute, second].map(this.formatNumber).join(':')
			
				return `${t1} ${t2}`
			},
			formatNumber (n) {
				const str = n.toString()
				return str[1] ? str : `0${str}`
			},
			async getList(type){
				if (type !== undefined) {
					this.type = type
					this.page = 1
					this.list = []
				}
				uni.showLoading()
				const logres = await API.request('get','/device/getBalanceLog', {
						payment_type: this.info.payment_type,
						type: this.type,
						page: this.page,
						size: this.size,
					})
				uni.hideLoading()
				this.list = this.page == 1 ? logres.data : [].concat(this.list, logres.data)
				this.isNull = logres.current_page === logres.last_page
			}
		}
	}
</script>

<style scoped lang="scss">
	.wrap {
		min-height: 100vh;
		background: #F8F8FA;
		padding-top: 152rpx;
	}
	.menu {
		position: fixed;
		top: 30rpx;
		left: 30rpx;
		right: 30rpx;
		height: 92rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 32rpx;
		color: rgba(20, 25, 54, 1);
		display: flex;
		align-items: center;
		text-align: center;
		.item {
			width: 50%;
			line-height: 92rpx;
			&.active {
				color: #EA4D44;
				position: relative;
				font-weight: bold;
				&:before {
					content: "";
					position: absolute;
					left: 50%;
					bottom: 15rpx;
					transform: translateX(-50%);
					width: 40rpx;
					height: 4rpx;
					background: #EA4D44;
					border-radius: 2rpx;
				}
			}
		}
	}
	
	.list {
		background-color: #fff;
		margin: 0 30rpx;
		border-radius: 20rpx;
		padding: 30rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 40rpx;
		color: #141936;
		.item {
			display: flex;
			padding-bottom: 28rpx;
			border-bottom: 1rpx solid rgba(247, 247, 249, 1);
			margin-bottom: 30rpx;
			align-items: center;
			.left {
				flex: 1;
				font-size: 40rpx;
				.time {
					font-size: 24rpx;
					color: #999;
					margin-top: 10rpx;
				}
			}
			.right {
				min-width: 200rpx;
				height: 100%;
				display: flex;
				flex-direction: column;
					
				text-align: right;
				color: rgba(234, 77, 68, 1);
			}
		}
	}
</style>
